<template>
  <div class="top_nav">
    <router-link to="javascript:void(0);" class="top_left">
      <img src="../assets/image/logo.png" alt="" />
    </router-link>
    <div class="top_right">
      <router-link to="index">首页</router-link>
      <router-link to="about">关于我们</router-link>
      <router-link to="shop">商城小程序</router-link>
      <router-link to="seafood">生鲜小程序</router-link>
      <router-link to="caseshow">案例展示</router-link>
      <router-link to="Service" class="nav_item">
        服务项目
        <div class="nav_item_down">
          <router-link to="gzxcxtop">小程序开发</router-link>
          <router-link to="/service?port=ser1">网站建设</router-link
          >
          <router-link to="/service?port=ser2">电商平台</router-link
          >
        </div>
      </router-link>
      <router-link to="Contact">联系我们</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top_nav",
  data() {
    return {};
  },
  methods: {
  },
};
</script>

<style scoped lang="less">
a {
  text-decoration: none;
}
.top_nav {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 70px;
  align-items: center;
  .top_left {
    display: block;
    width: 27%;
    overflow: hidden;
    height: auto;
    img {
      width: 100%;
    }
  }
  .top_right {
    display: flex;
    width: 65%;
    justify-content: flex-end;
    > a {
      color: #fff;
      font-size: 18px;
      display: inline-block;
      padding: 0 23px 0 0;
      white-space:nowrap
    }
    > a:last-child {
      padding: 0;
    }
    .nav_item {
      position: relative;
      .nav_item_down {
        display: none;
        position: absolute;
        justify-content: center;
        width: 360px;
        left: -300px;

        height: 60px;
        > a {
          margin: 30px 0 0;
          display: block;
          width: 120px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 10px;
          color: #fff;
        }
        > a:hover {
          color: #07ad21;
          background: #fff;
        }
      }
    }
    .nav_item:hover .nav_item_down {
      display: flex;
    }
  }
}
</style>